<template>
	<view class="activation_code">
		<checkbox-group @change="checkboxChange" style="flex:1;">
			<label class="list" v-for="(item,index) in list" :key="index">
				<view>
					<checkbox :value="item.id+''" :checked="ischecked" v-if="item.status==0" />
					<checkbox disabled="disabled" v-else />
				</view>
				<view style="flex:1;">{{item.code}}</view>
				<text class="bottom" v-if="item.status==1">已激活</text>
				<view v-else-if="item.status==0">
					<text class="bottom3" @click="golink('../Give/Give?id='+item.id+'&type=actv')">激活</text>
				</view>
			</label>
		</checkbox-group>
		<view class="butt"></view>
		<view class="but">
			<button class="savegive" @click="showBottomPopup">确认转赠</button>
		</view>

		<uni-popup :show="showPopupBottom" :type="popType" v-on:hidePopup="hidePopup">
			<view class="bottom-popup">
				<text class="title">转赠验证</text>
				<view class="list2">
					<input type="text" placeholder="请输入对方的账户ID" v-model="accountid">
				</view>
				<view class="list2">
					<input type="text" placeholder="请确认对方的账户ID" v-model="saveaccountid">
				</view>
				<button type="primary" @click="savegive" style="margin: 10px 0;">确认转赠</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '../../components/uni-popup.vue';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				list: [],
				values: [],
				showPopupBottom: false,
				popType: 'middle',
				accountid: '',
				saveaccountid: '',
				ischecked: false
			};
		},
		onLoad() {
			this.getData()
		},
		onNavigationBarButtonTap(e) { //顶部导航右侧点击事件
			this.values = [];
			if (!this.ischecked) {
				this.ischecked = true;
			} else {
				this.ischecked = false;
				this.values = [];
				return;
			}
			for (var i = 0; i < this.list.length; i++) {
				if (this.list[i].status == 0) {
					this.values.push(this.list[i].id);
				}
			}
		},
		methods: {
			//统一的关闭popup方法
			hidePopup: function() {
				this.showPopupBottom = false;
			},
			//展示底部 popup
			showBottomPopup: function() {
				this.hidePopup();
				this.popType = 'bottom';
				this.showPopupBottom = true;
			},
			checkboxChange: function(e) {
				console.log(e);
				this.values = e.detail.value;
			},
			golink: function(link) {
				// 跳转到其他页面
				uni.navigateTo({
					url: link
				})
			},
			getData: function() {
				const _this = this;
				//获取激活码
				this.$request.post("/api/ucenter/getActiveCode", {})
					.then(res => {
						if (res.data.code == 1) {
							_this.list = res.data.data.list;
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			},
			//确认转赠
			savegive: function() {
				if (this.values.length <= 0) {
					uni.showToast({
						title: "请选择激活码",
						icon: "none",
					});
					return false;
				}
				if (!this.accountid) {
					uni.showToast({
						title: "请输入对方的账户ID",
						icon: "none",
					});
					return false;
				}
				if (this.accountid != this.saveaccountid) {
					uni.showToast({
						title: "对方账户ID不一致",
						icon: "none",
					});
					return false;
				}
				const data = {
					cid: this.values,
					user_id: this.accountid
				}
				this.$request.post("/api/ucenter/sendCode", {
						data: data
					})
					.then(res => {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
						if (res.data.code == 1) {
							this.showPopupBottom = false;
							this.getData();
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			}
		}
	}
</script>

<style lang="less">
	.activation_code {
		background-color: #F1F1F1;
		width: 100%;
		display: flex;
		flex-direction: column;

		.list {
			height: 60px;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
			border-top: 1px solid #F1F1F1;
			font-size: 16px;
			color: #707070;

			.bottom {
				color: #D14B64;
			}

			.bottom2 {
				color: #FFF;
				background-color: #1D7BFF;
				padding: 0 20px;
				border-radius: 12upx;
			}

			.bottom3 {
				color: #FFF;
				background-color: #1D7BFF;
				padding: 0 20px;
				border-radius: 12upx;
				margin-left: 10px;
			}
		}

		.but {
			padding: 20px 0;
			position: fixed;
			bottom:0;
			width: 100%;
			background: #fff;
			.savegive {
				width: 275px;
				height: 46px;
				background: rgba(29, 123, 255, 1);
				color: #fff;
				border-radius: 8px;
			}
		}
		.butt {
			height: 90px;
		}
	}

	.bottom-popup {
		width: 90%;
		margin: 0 auto;

		.title {
			line-height: 60px;
		}

		.input {
			border-bottom: 1px solid #F1F1F1;
			font-size: 14px;
		}
	}

	.list2 {
		height: 60px;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		border-top: 1px solid #F1F1F1;
		font-size: 16px;
		color: #707070;

		input {
			display: block;
			width: 100%;
		}
	}
</style>
